<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>滨海基金 -员工管理</title>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Data Tables -->
<link href="css/plugins/dataTables/dataTables.bootstrap.css"
	rel="stylesheet">

<link href="css/animate.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<link href="css/jquery-confirm.css" rel="stylesheet">
<link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
<link href="css/plugins/iCheck/custom.css" rel="stylesheet">
<script src="js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins/jeditable/jquery.jeditable.js"></script>
<script src="js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script type="text/javascript"
	src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
<script src="js/plugins/modal/bootstrap-modal.js"></script>
<script type="text/javascript" src="js/img_upload.js"></script>
<script type="text/javascript" src="js/fileUploadUtil.js"></script>
<script src="js/My97DatePicker/WdatePicker.js"></script>
<script src="js/jquery-confirm.js"></script>
<script src="js/common.js"></script>
<script src="js/plugins/iCheck/icheck.min.js"></script>
<style type="text/css">
/* dataTables列内容居中 */
.table>tbody>tr>td {
	text-align: center;
}

/* dataTables表头居中 */
.table>thead:first-child>tr:first-child>th {
	text-align: center;
}

#sel>select {
	width: 200px;
	height: 35px;
	float: left;
	margin-right:5px;
}
#sel>select:last-child{
	margin-right:0;
}

#sel {
	width: 100%;
	height: 50px;
	padding: 5px;
}
</style>
</head>
<body class="gray-bg">
	<div class="row">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>
						销售<small>目标</small>
					</h5>
					<div class="ibox-content">
						<div class="col-md-12" style="padding-left:0;">
							<div class="col-md-5" id="sel" style="width:520px;">
							<%-- <select class="form-control" style="width: 200px" id="company"
									onchange="Search()">
									<c:forEach var="dept" items="${dept }">
										<option value="${dept.deptId }">${dept.deptName }（${dept.remake }）</option>
									</c:forEach>
								</select> --%>
							<select class="form-control" style="width: 200px" id="company"
								onchange="cpmpanyChage(this.value)">
							</select> <select class="form-control" style="width: 150px" id="branch"
								onchange="branchChage(this.value)">
								<option value="">-请选择-</option>
							</select> <select class="form-control" style="width: 150px"
								onchange="Search()" id="team" onchange="">
								<option value="">-请选择-</option>
							</select>
						</div>
						<div class="input-group col-md-3"
							style="margin-top: 5px; position: relative; width: 300px; float: left;">
							<input id="empName" type="text" class="form-control "
								placeholder="请输入关键字（名称）" /> <span class="input-group-btn">
								<button onclick="Search()" class="btn btn-info btn-search">查询</button>
							</span>
						</div>
						</div>
						<table id="employeeTable"
							class="table table-striped table-bordered table-hover dataTables-example dataTable">
							<thead>
								<tr style="height: 20px">
									<th style="width: 40px" align="center">序号</th>
									<th style="width: 60px" align="center">名称</th>
									<th style="width: 60px" align="center">目标</th>
									<th style="width: 70px" align="center">销售额</th>
									<th style="width: 70px" align="center">员工数</th>
									<th style="width: 70px" align="center">客户数</th>
									<th style="width: 70px" align="center">已签约客户数</th>
									<th style="width: 70px" align="center">本月新增客户数</th>
									<th style="width: 50px" align="center">操作</th>
								</tr>
							</thead>
						</table>
					</div>
				</div>
			</div>
		</div>
		<div class="modal fade" id='importModal'>
			<div class="modal-dialog" style="width: 500px; height: 600px;">
				<div class="modal-content">
					<form method="post" class="form-horizontal m-t" id="importEmployee"
						enctype="multipart/form-data">
						<div class="modal-header">
							<button class="close" data-dismiss='modal'>×</button>
							<h2 class="modal-title" align="center" id="title2">设定目标</h2>
						</div>
						<div class="modal-body" align="center">
							<div class="row form-body form-horizontal m-t">
								<div class="form-group draggable">
									<label class="col-sm-4 control-label">目标金额：</label>
									<div class="col-sm-6" style="text-align: left;">
										<input type="text" name="activityName" id="amount"
											class="form-control" placeholder="请输入目标金额"> <input
											type="hidden" id="fullId"> <span style="color: red;">注:每月设置一次</span>
									</div>
								</div>
							</div>
						</div>
						<div class="modal-footer" align="center">
							<div align="center" id="btd">
								<button type="button" class="btn btn-info" id="btnAdd">确认</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			//打开导入excel文件窗口
			function dimission(id, fullId) {
				$("#importEmployee")[0].reset();
				$.ajax({
					url : "checkSetTarget.do",
					type : "post",
					data : {
						id : id
					},
					dataType : "json",
					success : function(result) {
						if (result.code == 0) {
							$("#fullId").val(fullId);
							$("#importModal").modal("show");
						} else {
							sweetAlert("提示", "已设置过目标了!", "success");
						}

					},
					error : function() {
						sweetAlert("异常", "网络出现异常!", "error");
					}

				});// ajax end;
			}
			var darw = 0;
			var table;
			$(function() {
				//提示信息
				var lang = {
					"sProcessing" : "<div style=\"float:right;width:50%\" >处理中...</div>",
					"sLengthMenu" : "每页 _MENU_ 项",
					"sZeroRecords" : "没有匹配结果",
					"sInfo" : "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
					"sInfoEmpty" : "当前显示第 0 至 0 项，共 0 项",
					"sInfoFiltered" : "(由 _MAX_ 项结果过滤)",
					"sInfoPostFix" : "",
					"sSearch" : "搜索:",
					"sUrl" : "",
					"sEmptyTable" : "表中数据为空",
					"sLoadingRecords" : "载入中...",
					"sInfoThousands" : ",",
					"oPaginate" : {
						"sFirst" : "首页",
						"sPrevious" : "上页",
						"sNext" : "下页",
						"sLast" : "末页",
						"sJump" : "跳转"
					},
					"oAria" : {
						"sSortAscending" : ": 以升序排列此列",
						"sSortDescending" : ": 以降序排列此列"
					}
				};
				//初始化表格
				table = $("#employeeTable")
						.dataTable(
								{

									"fnDrawCallback" : function() {
										var api = this.api();
										var startIndex = api.context[0]._iDisplayStart;//获取到本页开始的条数
										api.column(0).nodes().each(
												function(cell, i) {
													cell.innerHTML = startIndex
															+ i + 1;
												});

									},
									language : lang, //提示信息
									autoWidth : false, //禁用自动调整列宽
									stripeClasses : [ "odd", "even" ], //为奇偶行加上样式，兼容不支持CSS伪类的场合
									processing : true, //隐藏加载提示,自行处理
									serverSide : true, //启用服务器端分页
									searching : false, //禁用原生搜索
									orderMulti : false, //启用多列排序
									order : [], //取消默认排序查询,否则复选框一列会出现小箭头
									renderer : "bootstrap", //渲染样式：Bootstrap和jquery-ui
									pagingType : "simple_numbers", //分页样式：simple,simple_numbers,full,full_numbers
									"aLengthMenu" : [ 10 ],
									"bLengthChange" : false,//屏蔽tables的一页展示多少条记录的下拉列表
									ordering : false, //关闭排序图标
									bStateSave : true, //刷新 停留在当前页
									ajax : function(data, callback, settings) {
										//封装请求参数
										var param = {};
										param.limit = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
										param.start = data.start;//开始的记录序号
										param.page = (data.start / data.length) + 1;//当前页码
										// param.darw=darw;  //计数器

										var empName = $("#empName").val()
												.trim();
										if (empName != null && empName != "") {//获取搜索条件
											param.name = empName;
										}

										param.deptId = $("#company").val();
										param.branchId = $("#branch").val();
										param.teamId = $("#team").val();

										//ajax请求数据
										$
												.ajax({
													type : "POST",
													url : "getSalesTarget.do",
													cache : false, //禁用缓存
													data : param, //传入组装的参数
													dataType : "json",
													success : function(result) {

														//setTimeout仅为测试延迟效果
														//封装返回数据
														var returnData = {};
														draw = result.draw;//后台返回的计数器
														returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
														returnData.recordsTotal = result.total;//返回数据全部记录
														returnData.recordsFiltered = result.total;//后台不实现过滤功能，每次查询均视作全部结果
														returnData.data = result.data;//返回的数据列表

														//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
														//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
														callback(returnData);

													}
												});
									},
									//列表表头字段
									columns : [ {
										"data" : null
									}, {
										"data" : "name"
									}, {
										"data" : "objectiveMoney"
									}, {
										"data" : "salesAmount"
									}, {
										"data" : "employeeCount"
									}, {
										"data" : "customerCount"

									}, {
										"data" : "signCustomerCount"
									}, {
										"data" : "insertCustomerCount"
									} ],
									columnDefs : [ {
										"targets" : [ 8 ], //第11列加一条 自定义列
										"data" : "objectiveId", //数据列名
										"render" : function(data, type, full) { //返回自定义的内容
											if (full.createPeople != null
													&& full.emptys != "") {
												return "无";
											} else {
												if (full.objectiveMoney == 0) {
													return "<a class=\"btn btn-warning btn-xs\" onclick=\"dimission('"
															+ data
															+ "','"
															+ full.id
															+ "')\">设置</a> ";
												} else {
													return "<a class=\"btn btn-default btn-xs\">设置</a> ";
												}
											}

										}
									} ]
								})//.api();
				$("#btnAdd").click(
						function() {
							$("#addModal").modal("show");

							if ($("#amount").val() != ""
									&& $("#amount").val() != null) {
								$.ajax({
									url : "addObjective.do",
									type : "post",
									data : {
										money : $("#amount").val(),
										id : $("#fullId").val(),
										deptId : $("#company").val(),
										branchId : $("#branch").val(),
										teamId : $("#team").val()
									},
									dataType : "json",
									success : function(result) {
										if (result.code == 0) {
											swal({
												title : "提示",
												text : "设置成功！",
												type : "success",
												confirmButtonText : "确定"
											},
													function() {
														//刷新表
														Search();
														$("#importModal")
																.modal("hide");
													});

										} else {
											sweetAlert("提示", "设置失败!", "error");
										}
									},
									error : function() {
										sweetAlert("提示", "操作失败,请刷新后重试!", "error");
									}

								});// ajax end;
							} else {
								sweetAlert("提示", "请输入目标值!", "error");
							}
						});
				$("#amount").on(
						"keyup",
						function() {
							var valid = /^\d{0,8}(\.\d{0,2})?$/
									.test(this.value), val = this.value;
							if (!valid) {
								sweetAlert("提示", "请输入正确数字!", "error");
								this.value = val.substring(0, val.length - 1);
							}
						});
				cpmpanyDept();
			})
			//搜索功能
			function Search() {
				/* var oSettings = table.fnSettings();  
				oSettings._iDisplayStart = 0;  
				table.fnDraw(oSettings);   */
				table.fnDraw();
			}
			function cpmpanyDept() {
				$
						.ajax({
							url : "getDeptInfo.do",
							type : "post",
							dataType : "json",
							success : function(result) {
								if (result.code == 0) {
									var branchHtml = "";
									if (result.quarters == 5
											|| result.quarters == 6) {
										branchHtml += "<option value=\"\" >-全部分公司-</option>";
									}
									for (var i = 0; i < result.data.length; i++) {
										branchHtml += "<option value=\""
										+ result.data[i].deptId + "\">"
												+ result.data[i].deptName
												+ "("
												+ result.data[i].remake
												+ ")</option>";
									}
									$("#company").append(branchHtml);
									$("#company").trigger("change");

								} else {
									sweetAlert("提示", "操作失败,请刷新后重试!", "error");
								}
							},
							error : function() {
								sweetAlert("异常", "网络出现异常!", "error");
							}
						});// ajax end;
			}
			function cpmpanyChage(id) {
				if ($("#company").val() != "" && $("#company").val() != null) {
					$
							.ajax({
								url : "getBranchInfo.do",
								type : "post",
								data : {
									id : id
								},
								dataType : "json",
								success : function(result) {
									if (result.code == 0) {
										var branchHtml = "";
										if (result.quarters != 2
												&& result.quarters != 1) {
											branchHtml += "<option value=\"\" >-请选择-</option>";
										}
										for (var i = 0; i < result.branch.length; i++) {
											branchHtml += "<option value=\""
											+ result.branch[i].branchId + "\">"
													+ result.branch[i].branchName
													+ "</option>";
										}
										$("#branch").empty();
										$("#branch").append(branchHtml);
										$("#branch").trigger("change");
									} else {
										sweetAlert("提示", "未知异常!", "error");
									}
								},
								error : function() {
									sweetAlert("异常", "网络出现异常!", "error");
								}
							});// ajax end;
				} else {
					$("#branch").empty();
					$("#branch").append("<option value=\"\" >-请选择-</option>");
					$("#branch").trigger("change");
				}

			}
			function branchChage(id) {
				if ($("#branch").val() != "" && $("#branch").val() != null) {
					$
							.ajax({
								url : "getTeamInfo.do",
								type : "post",
								data : {
									id : id
								},
								dataType : "json",
								success : function(result) {
									if (result.code == 0) {
										var branchHtml = "";
										if (result.quarters != 1) {
											branchHtml += "<option value=\"\" >-请选择-</option>";
										}
										for (var i = 0; i < result.data.length; i++) {
											branchHtml += "<option value=\""
											+ result.data[i].branchId + "\">"
													+ result.data[i].branchName
													+ "</option>";
										}
										$("#team").empty();
										$("#team").append(branchHtml);
										Search();
									} else {
										sweetAlert("提示", "未知异常!", "error");
									}
								},
								error : function() {
									sweetAlert("异常", "网络出现异常!", "error");
								}
							});// ajax end;
				} else {
					$("#team").empty();
					$("#team").append("<option value=\"\" >-请选择-</option>");
					Search();
				}

			}
		</script>
</body>

</html>